<template>
  <div class="title">
    <div class="one" @click="fun('one')" :class="lei1">观测·攻略</div>
    <div class="two" @click="fun('two')" :class="lei2">攻略讨论区</div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      lei1:'actived',
      lei2:''
    }
  },
  methods: {
    fun(num){
      this.lei1 = '';
      this.lei2 = '';
      if(num == 'one'){
        this.lei1 = 'actived';
      }
      if(num == 'two'){
        this.lei2 = 'actived';
      }
    }
  },
}
</script>

<style scoped>
.title {
  height: 0.52rem;
  /* background-color: turquoise; */
  padding: .1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(235,235,235);
  background-color: rgb(245,245,245);
}
.title .one,.title .two{
  width: 50%;
  height: 100%;
  line-height: .3rem;
  text-align: center;
  border: 1px solid rgb(235,235,235);
  background-color: rgb(235,235,235);
  color: rgb(200,200,200);
  font-size: .16rem;
}
.title .actived{
  color: rgb(25,163,254);
  background-color: white;
}
</style>